<template>
  <div>
    <a-button @click="back">返回</a-button>
    <div v-if="orderInfo.approvalStatus == 1">
      <div class="formItem">
        <div class="formLable">
          <div>审核状态：</div>
        </div>
        <div class="formInput">
          <div>
            <a-button
              type="primary"
              style="margin-right: 30px"
              @click="checkPass(1)"
            >
              通过 </a-button
            ><a-button
              type="primary"
              style="margin-right: 30px"
              @click="checkPass(2)"
            >
              通过并开票
            </a-button>
            <a-button
              type="danger"
              style="margin-right: 30px"
              @click="checkPass(3)"
            >
              拒绝
            </a-button>
          </div>
        </div>
      </div>
      <div class="formItem">
        <div class="formLable">
          <span style="color: red">*</span>
          <div>拒绝理由：</div>
        </div>
        <div class="formInput">
          <div class="formInput">
            <a-textarea
              style="width: 300px"
              :rows="4"
              placeholder="输入拒绝理由，0~300字"
              :max-length="300"
              v-model="orderInfo.rejectReason"
            />
          </div>
        </div>
      </div>
    </div>

    <div v-else>
      <div class="formItem">
        <div class="formLable">
          <div>审核状态：</div>
        </div>
        <div class="formInput">
          <div class="formInput">
            <div style="line-height: 30px">
              {{ orderInfo.approvalStatus | approvalStatus }}
            </div>
          </div>
        </div>
      </div>
      <div v-if="orderInfo.approvalStatus">
        <div class="formItem" v-if="orderInfo.approvalStatus == 3">
          <div class="formLable">
            <div>拒绝理由：</div>
          </div>
          <div class="formInput">
            <div class="formInput">
              <a-textarea
                style="width: 300px"
                :rows="4"
                placeholder="输入拒绝理由，0~300字"
                :max-length="300"
                v-model="orderInfo.rejectReason"
                :disabled="true"
              />
            </div>
          </div>
        </div>

        <div class="formItem">
          <div class="formLable">
            <div>审核人：</div>
          </div>
          <div class="formInput">
            <div class="formInput">
              <div style="line-height: 30px">
                {{ orderInfo.approvalUser }}
              </div>
            </div>
          </div>
        </div>

        <div class="formItem">
          <div class="formLable">
            <div>审核时间：</div>
          </div>
          <div class="formInput">
            <div class="formInput">
              <div style="line-height: 30px">
                {{ orderInfo.updateDate }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="title" style="margin-top: 30px">发票详情</div>
    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      :scroll="{ x: 2500 }"
      :pagination="false"
      style="margin-bottom: 20px"
      rowKey="id"
    >
      <template slot="tableOperation" slot-scope="text, record">
        <a-space>
          <a
            href="javascript:;"
            class="text-primary text-danger"
            @click="reopenInvoice(record.id)"
            v-if="record.approvalStatus == 2 && record.invoiceStatus == 4"
            >重开</a
          ><a
            href="javascript:;"
            class="text-primary text-danger"
            @click="openInvoiceInfo(record, 'edit')"
            v-if="
              (record.approvalStatus != 2 && record.approvalStatus != 3) ||
              (record.approvalStatus == 2 && record.invoiceStatus == 1) ||
              (record.approvalStatus == 2 && record.invoiceStatus == null)
            "
            >修改</a
          >
        </a-space>
      </template>
      <template slot="ImgTextTable" slot-scope="text, record">
        <div
          v-for="(item, i) in record.orderGoodsList"
          :key="i"
          class="orderNum"
        >
          {{ item.orderGoodsNo }}
        </div>
      </template>
      <template slot="failCauseOpration" slot-scope="text, record">
        <div v-if="record.invoiceStatus == 4">{{ record.failCause }}</div>
        <div v-else-if="record.invoiceStatus == 3" class="successImg">
          <div
            v-for="(l, i) in record.invoiceImage"
            :key="i + 'index'"
            class="imgBox"
          >
            <table-img :src="l" />
          </div>
        </div>
        <div v-else></div>
      </template>
    </a-table>

    <div class="title" v-if="orderInfo.approvalStatus == 1">关联开票申请</div>
    <a-table
      :columns="columns"
      :data-source="relationData"
      bordered
      :scroll="{ x: 2500 }"
      :pagination="false"
      style="margin-bottom: 20px"
      rowKey="id"
      v-if="orderInfo.approvalStatus == 1"
    >
      <template slot="ImgTextTable" slot-scope="text, record">
        <div
          v-for="(item, i) in record.orderGoodsList"
          :key="i"
          class="orderNum"
        >
          {{ item.orderGoodsNo }}
        </div>
      </template>
      <template slot="failCauseOpration" slot-scope="text, record">
        <div v-if="record.invoiceStatus == 4">{{ record.failCause }}</div>
        <div v-else-if="record.invoiceStatus == 3" class="successImg">
          <div v-for="(l, i) in record.invoiceImage" :key="i" class="imgBox">
            <table-img :src="l" />
          </div>
        </div>
        <div v-else></div>
      </template>
      <template slot="tableOperation" slot-scope="text, record">
        <a-space>
          <a
            href="javascript:;"
            class="text-primary text-danger"
            @click="lookInfo(record.id)"
            >查看详情</a
          >
        </a-space>
      </template>
    </a-table>

    <div class="title">关联订单</div>

    <div class="list">
      <div class="tab_header">
        <div class="item item--express-type">商品订单编号</div>
        <div
          class="item item--goods-info"
          style="flex: 3 1 0%; min-width: 400px"
        >
          <span class="item__cell goods-basic">商品</span>
          <span class="item__cell goods-num">单价(元) / 数量</span>
        </div>
        <div class="item item--revicer-info"><span>买家 / </span>收货人</div>
        <div class="item item--express-type">配送方式</div>
        <div class="item item--realpay">实收金额(元)</div>
        <div class="item item--order-state">订单状态</div>
        <div class="item item--realpay">供应商名称</div>
        <div
          class="item item--revicer-info"
          style="text-align: right; padding-right: 12px"
        >
          操作
        </div>
      </div>

      <template v-if="orderList.length > 0">
        <div
          class="tab_content"
          v-for="(dataSourceItem, index) in orderList"
          :key="index"
        >
          <div class="order-item__header">
            <div class="basic-info">
              <div class="info-wrapper">
                <!-- <a-checkbox @change="checkboxChange($event,dataSourceItem)"></a-checkbox>-->
                <span class="basic"
                  >订单编号：{{ dataSourceItem.orderNo }}</span
                >
                <span class="basic"
                  >下单时间：{{ dataSourceItem.createDate }}</span
                >
                <span class="basic"
                  >订单来源：{{
                    dataSourceItem.orderFromType | orderFormType
                  }}</span
                >
                <span class="basic"
                  >订单类型：{{
                    getTypeName("ORDER_TYPE", dataSourceItem.orderType)
                  }}</span
                >
              </div>
              <div class="star-text">
                <!--这个状态是dataSourceItem里面的属性,根据不同状态显示不同文字-->
                <span
                  style="color: red"
                  v-if="dataSourceItem.returnGoodsStatus == null"
                ></span>
                <span
                  style="color: red"
                  v-if="dataSourceItem.returnGoodsStatus == 'TO_AUDIT'"
                  >待审核</span
                >
                <span
                  style="color: red"
                  v-if="dataSourceItem.returnGoodsStatus == 'APPROVE_AUDIT'"
                  >审核通过</span
                >
                <span
                  style="color: red"
                  v-if="dataSourceItem.returnGoodsStatus == 'REVIEW_FAILED'"
                  >审核未通过</span
                >
                <span
                  style="color: red"
                  v-if="dataSourceItem.returnGoodsStatus == 'USER_CANCEL'"
                  >用户自行取消</span
                >

                <!--               <span style="color: red" v-if="dataSourceItem.returnGoodsStatus =='WAITING_DELIVERY'">买家待发货</span>-->
                <!--               <span style="color: red" v-if="dataSourceItem.returnGoodsStatus =='WAITING_GOODS'">卖家待收货</span>-->
                <!--               <span style="color: red" v-if="dataSourceItem.returnGoodsStatus =='RECEIVED_GOODS'">卖家已收货</span>-->

                <span
                  style="color: red"
                  v-if="
                    dataSourceItem.returnGoodsStatus == 'RECEIVED_GOODS' ||
                    dataSourceItem.returnGoodsStatus == 'WAITING_GOODS' ||
                    dataSourceItem.returnGoodsStatus == 'WAITING_DELIVERY'
                  "
                  >退货中</span
                >
                <span
                  style="color: red"
                  v-if="dataSourceItem.returnGoodsStatus == 'REFUND_OF'"
                  >退款中</span
                >
                <span
                  style="color: red"
                  v-if="
                    dataSourceItem.returnGoodsStatus == 'REFUND_FINISH' &&
                    dataSourceItem.repairsType == 1
                  "
                  >已退款</span
                >
                <span
                  style="color: red"
                  v-if="
                    dataSourceItem.returnGoodsStatus == 'REFUND_FINISH' &&
                    dataSourceItem.repairsType == 2
                  "
                  >已退货退款</span
                >
              </div>
            </div>
          </div>
          <div class="order-item__body">
            <div class="cell cell--express-type">
              {{ dataSourceItem.orderGoodsNo }}
            </div>
            <div
              class="cell cell--goods-list"
              style="flex: 3 1 0%; min-width: 400px"
            >
              <div class="goods-item">
                <div class="goods-info">
                  <div class="rc-goods-cell rc-goods-cell-show-photo">
                    <div class="rc-goods-cell-left">
                      <div
                        class="rc-goods-cell-img rc-goods-cell-img-previewable"
                      >
                        <div
                          class="retail-lazyimage-container cover"
                          style="width: 60px; height: 60px"
                        >
                          <table-img
                            style="width: 100%; height: 100%"
                            :src="dataSourceItem.goodsImg"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="rc-goods-cell-right">
                      <div class="rc-goods-cell-name">
                        <a
                          href="javascript:;;"
                          class="rc-blank-link"
                          rel="noopener noreferrer"
                          >{{ dataSourceItem.goodsName }}</a
                        >
                      </div>
                      <div class="rc-goods-cell-info rc-goods-cell-info-spec">
                        {{ dataSourceItem.skuName }}
                      </div>
                      <div class="rc-goods-cell-info rc-goods-cell-info-no">
                        {{ dataSourceItem.goodsCode }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="goods-item__cell goods-num">
                  <p
                    v-if="
                      dataSourceItem.paymentWay == 0 ||
                      dataSourceItem.paymentWay == 1 ||
                      dataSourceItem.paymentWay == null
                    "
                  >
                    ¥ {{ dataSourceItem.goodsPrice | filterPrice }}元
                  </p>
                  <p v-else-if="dataSourceItem.paymentWay == 2">
                    ¥ {{ dataSourceItem.goodsPrice | filterPrice }}+{{
                      dataSourceItem.integralPrice
                    }}固定积分
                  </p>
                  <p v-else-if="dataSourceItem.paymentWay == 3">
                    {{ dataSourceItem.integralPrice }}积分
                  </p>
                  <p style="color: rgb(150, 151, 153)">
                    {{ dataSourceItem.goodsNum }} 件
                  </p>
                </div>

                <div class="goods-item__cell refund-info"></div>
              </div>
            </div>
            <div class="cell cell--receiver-info">
              <div>
                <p v-if="dataSourceItem.customerPhone">
                  <span style="color: #0b59f9; cursor: pointer">{{
                    dataSourceItem.customerPhone || ""
                  }}</span>
                </p>
                <!--<p v-if="!!dataSourceItem.customerPhone"><a-button type="link" @click="toClientDetailPage">{{dataSourceItem.customerPhone || ''}}</a-button> </p>-->
                <p>
                  <span
                    class="rc-blank-link"
                    style="color: #0b59f9; cursor: pointer"
                  >
                    {{ dataSourceItem.userName }}
                  </span>
                  <!--<router-link target="_blank" :to="{name:'CustomerUserInfo',query:{id:dataSourceItem.userId}}">{{ dataSourceItem.userPhone }}</router-link>-->
                  <!-- <a-button type="link" @click="toClientDetailPage(dataSourceItem)">
                    {{ dataSourceItem.userPhone }}
                  </a-button>-->
                </p>
                <p>
                  {{ dataSourceItem.provinceName }}
                  {{ dataSourceItem.cityName }}
                  {{ dataSourceItem.districtName }}
                  {{ dataSourceItem.detailAddress }}
                </p>
                <p>{{ dataSourceItem.userPhone }}</p>
              </div>
            </div>
            <div class="cell cell--express-type">
              {{ dataSourceItem.goodsDistribution | filterDistribution }}
            </div>
            <div class="cell cell--realpay">
              <p
                v-if="
                  dataSourceItem.paymentWay == 0 ||
                  dataSourceItem.paymentWay == 1 ||
                  dataSourceItem.paymentWay == null
                "
              >
                ¥ {{ dataSourceItem.goodsOrderPrice | filterPrice }}元
              </p>
              <p v-else-if="dataSourceItem.paymentWay == 2">
                ¥ {{ dataSourceItem.goodsOrderPrice | filterPrice }}+{{
                  dataSourceItem.integralPrice
                }}固定积分
              </p>
              <p v-else-if="dataSourceItem.paymentWay == 3">
                {{ dataSourceItem.integralPrice }}积分
              </p>
            </div>
            <div class="cell cell--order-state">
              <span v-if="dataSourceItem.returnGoodsStatus == 'REFUND_FINISH'"
                >已关闭</span
              >
              <span v-else>
                {{ dataSourceItem.orderStatus | filterOrderStatus }}</span
              >
            </div>
            <div class="cell cell--order-state">
              {{
                dataSourceItem.supplierName
                  ? dataSourceItem.supplierName
                  : "自营商品"
              }}
            </div>
          </div>
          <div class="order-item__footer remark-info">
            <p>
              <span>卖家备注：</span>
              <span class="remark-info__memo">
                {{ dataSourceItem.sellerNote }}</span
              >
            </p>
          </div>
        </div>

        <!-- <a-pagination
          v-model="paginations.current"
          :page-size-options="paginations.pageSizeOptions"
          :total="paginations.total"
          show-size-changer
          :page-size="paginations.size"
          @showSizeChange="tableChange"
          @change="tableChange"
          class="paginations"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span>{{ props.value }}条/页</span>
          </template>
        </a-pagination> -->
      </template>

      <template v-else>
        <img
          :src="require('@/assets/images/empty.png')"
          style="display: block; margin: 0 auto"
        />
      </template>
    </div>

    <!-- 修改发票信息 -->
    <InvoiceInfo
      :record="invoiceData"
      @cancel="closeInfoModal"
      :visible="invoiceInfoVisible"
      @freshTable="getInvoiceInfo"
    />
  </div>
</template>
<script>
import {
  createOptionsByDict,
  findDictListByType,
  findDictNameByValue,
} from "@/utils/dict";
import InvoiceInfo from "./components/InvoiceInfo";
export default {
  name: "invoiceDetails",
  components: {
    InvoiceInfo,
  },
  filters: {
    filterPrice(value) {
      if (!value) return "0.00";
      return `${(value / 100).toFixed(2)}`;
    },

    filterOrderStatus(value) {
      switch (value) {
        case "ORDER_UNPAID":
          return "待付款";
        case "ORDER_CANCEL":
          return "订单已取消"; // 已取消
        case "ORDER_UN_ISSUE":
          return "待发货"; // 待发货
        case "ORDER_LEFT_WAIT":
          return "待自提"; // 待自提
        case "ORDER_UN_RECEIVED":
          return "待收货"; // 待收货
        case "ORDER_UN_EVALUATE":
          return "待评价"; // 待评价
        case "ORDER_FINISH":
          return "已完成"; // 已完成
      }
    },

    filterDistribution(val) {
      if (val == 1) {
        return "定点自提";
      } else if (val == 0) {
        return "快递配送";
      } else if (val == 2) {
        return "定点配送";
      }
      return "快递配送";
    },
    orderTypeList(value) {
      switch (value) {
        case "GOODS_ORDER":
          return "普通订单";
        case "GROUP_ORDER":
          return "团购订单";
        case "SECKILL_ORDER":
          return "秒杀订单";
        case "ROOM_ORDER":
          return "直播间订单";
        default:
          return "普通订单";
      }
    },
    orderFormType(value) {
      switch (value) {
        case 1:
          return "微信小程序";
        case 2:
          return "直播间订单";
        default:
          return "微信小程序";
      }
    },
    approvalStatus(value) {
      switch (value) {
        case null:
          return "待收货";
        case 1:
          return "待审核";
        case 2:
          return "已通过";
        case 3:
          return "拒绝";
        default:
          return "待收货";
      }
    },
  },
  data() {
    return {
      data: [],
      columns: [
        {
          title: "确认收货时间",
          dataIndex: "submissionDate",
          key: "submissionDate",
          align: "center",
        },
        {
          title: "申请开票时间",
          dataIndex: "createDate",
          key: "createDate",
          align: "center",
        },
        {
          title: "开票金额",
          dataIndex: "invoiceMoney",
          key: "invoiceMoney",
          align: "center",
          width: "120px",
          customRender: (text, row) => {
            return "¥ " + ((text * 1) / 10 / 10).toFixed(2);
          },
        },
        {
          title: "开票方式",
          dataIndex: "invoiceWay",
          key: "invoiceWay",
          width: "120px",
          align: "center",
          customRender: (text, row) => {
            if (text == 1) {
              text = "普通开票";
            } else if (text == 2) {
              text = "合单开票";
            } else {
              text = "普通开票";
            }
            return text;
          },
        },
        {
          title: "开票订单号",
          dataIndex: "ImgTextTable",
          key: "ImgTextTable",
          align: "center",
          width: "200px",
          scopedSlots: { customRender: "ImgTextTable" },
        },
        {
          title: "开票人昵称",
          key: "nickName",
          dataIndex: "nickName",
          align: "center",
          width: "150px",
        },
        {
          title: "开票人电话",
          dataIndex: "phoneNumber",
          key: "phoneNumber",
          align: "center",
          width: "130px",
        },
        {
          title: "发票类型",
          dataIndex: "invoiceType",
          key: "invoiceType",
          width: "130px",
          align: "center",
          customRender: (text, row) => {
            return "电子普通发票";
          },
        },
        {
          title: "发票内容",
          dataIndex: "content",
          key: "content",
          width: "120px",
          align: "center",
          customRender: (text, row) => {
            if (text == 1) {
              text = "商品类型";
            } else if (text == 2) {
              text = "商品详情";
            }
            return text;
          },
        },
        {
          title: "收票人邮箱",
          dataIndex: "email",
          key: "email",
          width: "120px",
          align: "center",
          customRender: (text, row) => {
            return row.infoResponse.email;
          },
        },
        {
          title: "抬头类型",
          dataIndex: "headType",
          key: "headType",
          width: "120px",
          align: "center",
          customRender: (text, row) => {
            if (row.infoResponse.headType == 1) {
              text = "企业";
            } else {
              text = "个人";
            }
            return text;
          },
        },
        {
          title: "发票抬头",
          dataIndex: "buyerName",
          key: "buyerName",
          width: "180px",
          align: "center",
          customRender: (text, row) => {
            return row.infoResponse.buyerName;
          },
        },
        {
          title: "公司税号",
          dataIndex: "buyerTaxNum",
          key: "buyerTaxNum",
          align: "center",
          customRender: (text, row) => {
            return row.infoResponse.buyerTaxNum;
          },
        },
        {
          title: "审核状态",
          dataIndex: "approvalStatus",
          key: "approvalStatus",
          align: "center",
          customRender: (text, row) => {
            if (text == null) {
              text = "待收货";
            } else if (text == 1) {
              text = "待审核";
            } else if (text == 2) {
              text = "已通过";
            } else if (text == 3) {
              text = "拒绝";
            }
            return text;
          },
        },
        {
          title: "开票状态",
          dataIndex: "invoiceStatus",
          key: "invoiceStatus",
          align: "center",
          customRender: (text, row) => {
            if (text == 1) {
              text = "待开票";
            } else if (text == 2) {
              text = "开票中";
            } else if (text == 3) {
              text = "开票成功";
            } else if (text == 4) {
              text = "开票失败";
            } else {
              text = "————";
            }
            return text;
          },
        },
        {
          title: "失败原因/查看发票",
          dataIndex: "failCause",
          key: "failCause",
          align: "center",
          scopedSlots: { customRender: "failCauseOpration" },
        },
        {
          title: "操作",
          dataIndex: "operation",
          align: "center",
          fixed: "right",
          width: 200,
          scopedSlots: { customRender: "tableOperation" },
        },
      ],
      relationData: [],
      props: {},
      orderList: [],
      orderInfo: {},
      invoiceInfoVisible: false,
      invoiceData: {},
      id: this.$route.query.id,
    };
  },
  methods: {
    async getInvoiceInfo() {
      let res = await this.$get("goldenhome/invoice/admin_/invoice/query", {
        id: this.id,
      });
      if (res && res.returnCode == "1000") {
        this.data = [res.dataInfo];
        this.relationData =
          res.dataInfo.relationInvoiceList == null
            ? []
            : [res.dataInfo.relationInvoiceList];
        this.orderList = res.dataInfo.orderGoodsList || [];
        this.orderInfo.approvalStatus = res.dataInfo.approvalStatus || "";
        this.orderInfo.rejectReason = res.dataInfo.rejectReason || "";
        this.orderInfo.updateDate = res.dataInfo.updateDate || "";
        this.orderInfo.approvalUser = res.dataInfo.approvalUser || "";
        this.invoiceData = res.dataInfo.infoResponse || {};
        this.invoiceData.id = res.dataInfo.id || "";
        this.invoiceData.content = res.dataInfo.content || "";
      }
    },
    //获取发票详情
    async getInvoiceInfoData(id) {
      let res = await this.$get("goldenhome/invoice/admin_/invoice/query", {
        id: id,
      });
      if (res && res.returnCode == "1000") {
        this.data = [res.dataInfo];
        this.relationData =
          res.dataInfo.relationInvoiceList == null
            ? []
            : [res.dataInfo.relationInvoiceList];
        this.orderList = res.dataInfo.orderGoodsList || [];
        this.orderInfo.approvalStatus = res.dataInfo.approvalStatus || "";
        this.orderInfo.rejectReason = res.dataInfo.rejectReason || "";
        this.orderInfo.updateDate = res.dataInfo.updateDate || "";
        this.orderInfo.approvalUser = res.dataInfo.approvalUser || "";
        this.invoiceData = res.dataInfo.infoResponse || {};
        this.invoiceData.id = res.dataInfo.id || "";
        this.invoiceData.content = res.dataInfo.content || "";
      }
    },
    getTypeName(type, value) {
      return findDictNameByValue(type, value);
    },
    //审核发票
    async checkInvoice(params) {
      let res = await this.$post(
        "goldenhome/invoice/admin_/invoice/approval",
        params
      );
      if (res && res.returnCode == "1000") {
        this.$message.success("操作成功");
        this.$router.push({
          name: "OrderInvoice",
        });
      }
    },
    checkPass(a) {
      let params = {
        status: a,
        id: this.id,
        rejectReason: this.orderInfo.rejectReason,
      };
      this.checkInvoice(params);
    },
    //重开发票
    async reopenInvoice(id) {
      let res = await this.$post("goldenhome/invoice/admin_/invoice/retry", {
        id: id,
      });
      if (res && res.returnCode == "1000") {
        this.$message.success("重开发票成功");
        this.$router.push({
          name: "OrderInvoice",
        });
      }
    },

    // 打开发票信息
    openInvoiceInfo(record, handle) {
      if (handle == "edit") {
        console.log("edit", record);
        this.invoiceInfoVisible = true;
      } else if (handle == "view") {
        console.log("view");
        if (record.invoiceImage) {
          this.$info({
            title: "发票",
            okText: "关闭",
            closable: true,
            maskClosable: true,
            width: "fit-content",
            content: (
              <img
                src={record.invoiceImage}
                onClick={() => window.open(record.invoiceImage)}
                style="max-width: 600px; max-height: 400px"
              />
            ),
          });
          // window.open('https://'+record.invoiceImage)
        } else if (record.failCause) {
          this.$message.error(record.failCause);
        }
      }
    },
    closeInfoModal(freshTable) {
      this.invoiceInfoVisible = false;
    },
    lookInfo(id) {
      this.id = id;
      this.getInvoiceInfoData(id);
    },
    back() {
      this.$router.push({
        name: "OrderInvoice",
      });
    },
  },
  created() {
    this.getInvoiceInfo();
  },
};
</script>
<style lang="less" scoped>
.title {
  margin-bottom: 15px;
}
//@import url();
.paginations {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.disPadding {
  padding: 0;
}

.tab_header {
  display: flex;
  height: 40px;
  background-color: #f7f8fa;
  width: 100%;
  line-height: 40px;
  margin: 10px 0;
  color: #323233;
  box-sizing: border-box;
  font-weight: bold;
  .item {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    padding: 0 10px;
  }
  .item--goods-info {
    padding: 0;
    display: flex;
    .item__cell {
      flex: 1;
    }
    .goods-basic {
      padding: 0 12px;
      text-align: left;
      flex-basis: 65%;
    }
    .goods-num {
      padding: 0 5px;
      flex-basis: 20%;
    }
    .goods-refund {
      padding: 0 10px;
      flex-basis: 60px;
    }
  }
}
.tab_content {
  margin-bottom: 14px;
  word-break: break-word;
  .order-item__header {
    .basic-info {
      display: flex;
      justify-content: space-between;
      min-width: 790px;
      background-color: #f7f8fa;
      border: 1px solid #ebedf0;
      padding: 12px 10px;
      .info-wrapper {
        display: flex;
        flex-wrap: wrap;
        .basic {
          margin-right: 15px;
        }
      }
    }
  }
  .order-item__body {
    display: flex;
    border: 1px solid #ebedf0;
    border-top: none;
    .cell--goods-list {
      display: flex;
      flex-direction: column;
      padding: 0;
      align-items: flex-start;
    }
    .cell {
      border-right: 1px solid #ebedf0;
      flex: 1;
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 60px;
    }
    .goods-info {
      flex: 1;
      flex-basis: 65%;
      padding: 10px 12px;
    }
    .goods-item {
      display: flex;
      flex: 1;
      width: 100%;
      box-sizing: border-box;
    }
    .goods-num {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 5px;
      flex-basis: 23%;
    }
    .rc-goods-cell {
      display: flex;
      box-sizing: border-box;
      width: 100%;
      max-width: 240px;
      .rc-goods-cell-left {
        flex-grow: 0;
        margin-right: 10px;
      }

      .rc-goods-cell-right {
        flex-grow: 1;
        padding: 4px 0;
        .rc-goods-cell-name {
          color: #323232;
          font-size: 14px;
          line-height: 18px;
          word-break: break-all;
        }
        .rc-goods-cell-info {
          margin-top: 2px;
          word-break: break-all;
          font-size: 12px;
          color: #969799;
        }
      }
    }

    .link-button {
      display: block;
      margin-bottom: 5px;
    }
  }

  .order-item__footer {
    border: 1px solid #ebedf0;
    border-top: 0;
    padding: 3px 10px;
    color: #969799;
  }
}
.formItem {
  display: flex;
  // align-items: center;
  .formLable {
    margin-top: 5px;
    width: 50%;
    // text-align: right;
    display: flex;
    justify-content: flex-end;
    // align-items: flex-start;
  }
  .formInput {
    width: 75%;
    position: relative;
    .patation {
      position: absolute;
      top: 5px;
      right: 70px;
      color: #d9d9d9;
    }
    .patation1 {
      position: absolute;
      top: 20px;
      right: 300px;
      color: #d9d9d9;
    }
    .patation2 {
      position: absolute;
      top: 5px;
      right: 10px;
      color: #d9d9d9;
    }
    .patation3 {
      position: absolute;
      top: 5px;
      right: 95px;
      color: #d9d9d9;
    }
  }
}
.formItem + .formItem {
  margin-top: 20px;
}
.successImg {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
  .imgBox {
    width: 45px;
    height: 30px;
    flex-shrink: 0;
    margin-top: 3px;
    .table-img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>